<template>
  <div class="hr-culture-container">
    <h2>企业文化</h2>
    <div class="culture-content">
      <div class="culture-section">
        <h3>文化理念</h3>
        <p>中空领航倡导"创新、协作、卓越、担当"的核心价值观，以"科技引领未来，智慧连接世界"为使命，致力于打造富有活力、创新和人文关怀的企业文化。</p>
        <div class="culture-img">
          <img src="http://www.sutpc.com/static/images/culture.jpg" alt="企业文化" />
        </div>
      </div>
      
      <div class="culture-section">
        <h3>员工活动</h3>
        <p>公司定期组织各类文体活动和团队建设活动，包括年度运动会、团建旅行、节日庆典、文化沙龙等，丰富员工业余生活，增强团队凝聚力。</p>
        <div class="activity-gallery">
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/activity1.jpg" alt="团队活动1" />
            <span>年度运动会</span>
          </div>
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/activity2.jpg" alt="团队活动2" />
            <span>团建旅行</span>
          </div>
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/activity3.jpg" alt="团队活动3" />
            <span>文化沙龙</span>
          </div>
        </div>
      </div>
      
      <div class="culture-section">
        <h3>工作环境</h3>
        <p>中空领航为员工提供现代化、舒适的工作环境，配备完善的办公设施和休闲空间，营造轻松愉悦的工作氛围，激发员工创造力和工作热情。</p>
        <div class="office-gallery">
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/office1.jpg" alt="办公环境1" />
            <span>现代化办公区</span>
          </div>
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/office2.jpg" alt="办公环境2" />
            <span>创意讨论区</span>
          </div>
          <div class="gallery-item">
            <img src="http://www.sutpc.com/static/images/office3.jpg" alt="办公环境3" />
            <span>员工休闲区</span>
          </div>
        </div>
      </div>
      
      <div class="culture-section">
        <h3>企业责任</h3>
        <p>作为一家有社会责任感的企业，中空领航积极参与社会公益活动，组织员工开展志愿服务，为建设和谐社会贡献力量。我们重视环境保护，倡导绿色办公，推动可持续发展。</p>
        <div class="csr-highlights">
          <div class="csr-item">
            <i class="el-icon-s-cooperation"></i>
            <h4>社区服务</h4>
            <p>定期组织社区志愿活动</p>
          </div>
          <div class="csr-item">
            <i class="el-icon-s-management"></i>
            <h4>教育支持</h4>
            <p>助学帮扶，支持教育事业</p>
          </div>
          <div class="csr-item">
            <i class="el-icon-s-opportunity"></i>
            <h4>绿色环保</h4>
            <p>推行节能减排，低碳办公</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HRCulture'
}
</script>

<style scoped>
.hr-culture-container {
  padding: 20px 0;
}

.hr-culture-container h2 {
  font-size: 28px;
  color: #333;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.culture-section {
  margin-bottom: 40px;
}

.culture-section h3 {
  font-size: 22px;
  color: #0066cc;
  margin-bottom: 15px;
}

.culture-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 15px;
}

.culture-img {
  margin: 20px 0;
  text-align: center;
}

.culture-img img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.activity-gallery, .office-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.gallery-item {
  flex: 1;
  min-width: 250px;
  text-align: center;
  margin-bottom: 15px;
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.03);
}

.gallery-item span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.csr-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.csr-item {
  flex: 1;
  min-width: 250px;
  background: #f5f9ff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.csr-item i {
  font-size: 40px;
  color: #0066cc;
  margin-bottom: 15px;
}

.csr-item h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.csr-item p {
  font-size: 14px;
  color: #666;
}
</style> 